<template>
  <view style="cursor: pointer">
    <gd-icon v-if="isShowPrefixIcon" :icon-name="prefixIconName"></gd-icon>
    {{ $attrs.node.label }}
    <gd-enhance-hack-dynmic-comp
      v-if="isShowTreeItemSuffixSlot"
      :component-file-path="treeItemSuffixSlotAttrs.componentFilePath"
      :root-path-type="treeItemSuffixSlotAttrs?.rootPathType ?? 'pages'"
      :component-props="{ node: $attrs.node, curBindVal: '' }"
      v-bind="$attrs"
    ></gd-enhance-hack-dynmic-comp>
  </view>
  <el-dropdown v-if="hasTreeItemMoreBtn">
    <span class="el-dropdown-link">
      <view style="display: flex; align-items: center">
        <!-- <view>{{ $attrs.node.label }}</view> -->
        <GdIcon
          :icon-name="'arrow-down'"
          style="height: 100%; margin: 2px 0 0 2px"
        ></GdIcon
      ></view>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <template v-for="btnConfig in treeItemBtns" :key="btnConfig.key">
          <el-dropdown-item
            v-if="
              schemaTools.getDynmicAttr({
                val: btnConfig.isShow,
                valFunc: btnConfig.isShowFunc,
                configObj: {
                  metaKey: btnConfig.key,
                  containerAttr: btnConfig.containerAttr,
                  metaItem: btnConfig,
                  formData: $attrs.node.data,
                },
              })
            "
            @click="
              btnConfig.onClick({
                metaKey: btnConfig.key,
                containerAttr: btnConfig.containerAttr,
                metaItem: btnConfig,
                formData: $attrs.node.data,
              })
            "
          >
            {{ btnConfig.label }}
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import { ref, getCurrentInstance, inject } from "vue";
import GdIcon from "@gd-accbuild-ui/gd-ui/gd-icon/gd-icon.vue";
import { getOperationBtnsConfig } from "../event-container";
import { useAttrs, computed } from "vue";
import { schemaTools } from "@gd-accbuild-core/config/utils";
const _attrs = useAttrs();
const myEmits = inject("myEmits", () => {});
const operationBtnsConfig = inject(
  "operationBtnsConfig",
  ref({
    buttons: [],
  })
);
const treeItemBtns = getOperationBtnsConfig(operationBtnsConfig, myEmits);
const hasTreeItemMoreBtn = computed(() => {
  return (
    treeItemBtns.value.length > 0 && treeItemBtns.value.some((el) => el.isShow)
  );
});

const treeNodeConfig = inject("treeNodeConfig", ref({}));
const isShowPrefixIcon = computed(() => {
  return treeNodeConfig.value.hasOwnProperty("prefixIconNameFunc");
});
const prefixIconName = computed(() => {
  if (isShowPrefixIcon.value) {
    const doFunc = new Function(
      "configObj",
      treeNodeConfig.value.prefixIconNameFunc
    );
    return doFunc({ node: _attrs.node });
  }
  return "";
});
const isShowTreeItemSuffixSlot = computed(() => {
  return treeNodeConfig.value.hasOwnProperty("suffixSlotConfig");
});
const treeItemSuffixSlotAttrs = computed(() => {
  return treeNodeConfig.value.suffixSlotConfig;
});
</script>
